<template>
	<!-- pages/member/sign_in/sign_in.wxml -->
	<view class="containe">
		<view class="box1">
			<view class="df ac js">
				<view class="point">
					<view>可用积分</view>
					<view>
						<text>{{ info.my_score }}</text>
						积分
					</view>
				</view>
				<image src="/static/static/icon/icon_gift.png" class="icon_gift"></image>
			</view>
			<view class="sign_inbox">
				<view class="df ac ja">
					<view class="sign_bg" v-for="(item, index) in info.sign_data">
						<view class="sign_bgbox">
							<block v-if="item.is_sign">
								<image src="/static/icon/icon_signsuc.png" class="icon_signsuc"></image>
							</block>
							<block v-else>
								<view class="fs20">{{ item.score }}</view>
								<view class="fs12">积分</view>
							</block>
							<image src="/static/icon/icon_signin.png" class="icon_signin"></image>
						</view>

						<view class="fs24">{{ item.day_text }}</view>
					</view>
				</view>
				<view v-if="info.today_is_sign" class="sign_btn" style="background-color: #abceef">已签到</view>
				<view v-else class="sign_btn" @tap="signNow">立即签到</view>
			</view>
			<navigator url="/pages/member/point_detail/point_detail" hover-class="none" class="sign_in_detail">明细记录
			</navigator>
		</view>
		
		<view class="taskbox">
			<view class="title">玩任务赚积分</view>
			<view class="task_item df ac js" v-for="(item, index) in info.task_data">
				<view class="df ac">
					<image :src="item.image_text" class="icon_task"></image>
					<view>
						<view class="task_title">
							{{ item.name }}
							<text>+{{ item.score }}积分</text>
						</view>
						<view class="fs20 col7e">{{ item.discription }}</view>
					</view>
				</view>

				<view v-if="item.is_complete" class="gotocom on">已完成</view>

				<view v-else class="gotocom" @tap="jumpToTask" :data-type="item.type">去完成</view>
			</view>
		</view>
		<view class="rule_box">
			<view class="title">活动规则</view>
			<view>
				<u-parse :content="article"></u-parse>
			</view>
		</view>
	</view>
</template>

<script>
	// pages/member/sign_in/sign_in.js
	const app = getApp();

	const functions = require('../../../utils/functions.js');

	export default {
		data() {
			return {
				info: {
					my_score: '',
					sign_data: [],
					today_is_sign: '',
					draw_prize_image: '',
					task_data: []
				},
				isLoading: true,
				// 判断是否尚在加载中
				article: '' // 内容数据
			};
		},
		
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.initData();
		},
		
		
		methods: {
			signNow() {
				var that = this; //继续提交

				functions.submitAjaxData(that, '/api/xiluhouse/score/sign', {}, function(res) {
					that.initData();
				});
			},

			// 跳转任务页面 任务类型:1=每日咨询,2=预约看房,3=浏览房源,4=我要问问,5=分享问问
			jumpToTask(event) {
				var that = this;
				var type = Number(event.currentTarget.dataset.type);

				switch (type) {
					case 1:
						uni.navigateTo({
							url: '/pages/broker/consultant/consultant'
						});
						break;

					case 2:
						uni.switchTab({
							url: '/pages/home/building_list/building_list'
						});
						break;

					case 3:
						uni.switchTab({
							url: '/pages/home/building_list/building_list'
						});
						break;

					case 4:
						uni.navigateTo({
							url: '/pages/article/want_ask/want_ask'
						});
						break;

					case 5:
						app.globalData.pagesParam = {
							nav: 2
						};
						app.globalData.is_need_page_change = true;
						uni.switchTab({
							url: '/pages/home/information/information'
						});
						break;

					default:
						break;
				} // wx.navigateTo({
				//   url: url,
				// })
			},

			// 跳转页面
			jumpToPages(event) {
				var that = this;
				var jump_type = Number(event.currentTarget.dataset.jump_type);
				var url = event.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},

			initData() {
				var that = this;
				functions.getAjaxData('/api/xiluhouse/Score/index', {}, function(res) {
					that.article = res.data.rule;
					that.isLoading = false;

					that.info = res.data;

				});
			}
		}
	};
</script>
<style>
	/* pages/member/sign_in/sign_in.wxss */
	@import url('@/static/css/old_project.css');
	.box1 {
		width: 750rpx;
		height: 505rpx;
		background: linear-gradient(#42a4ff, #0888ff);
		border-radius: 0 0 20% 20%;
		border-bottom: 15rpx solid #aed8ff;
		padding: 30rpx 30rpx 210rpx;
		position: relative;
	}

	.point {
		color: #fff;
		font-size: 30rpx;
	}

	.point text {
		font-size: 70rpx;
	}

	.icon_gift {
		width: 180rpx;
		height: 173rpx;
	}

	.sign_inbox {
		position: absolute;
		top: 215rpx;
		left: 30rpx;
		right: 30rpx;
		padding: 82rpx 0 44rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0px 0px 27rpx 0px rgba(2, 133, 255, 0.09);
	}

	.sign_bg {
		font-size: 24rpx;
		color: #5c5c5c;
		text-align: center;
	}

	.sign_bgbox {
		width: 40rpx;
		height: 47rpx;
		position: relative;
		margin: 0 auto 12rpx;
	}

	.sign_bgbox .fs12 {
		font-size: 12rpx;
		position: relative;
		z-index: 2;
	}

	.sign_bgbox .fs20 {
		font-size: 20rpx;
		position: relative;
		z-index: 2;
		line-height: 10rpx;
		padding-top: 10rpx;
	}

	.icon_signin {
		width: 40rpx;
		height: 47rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.ja {
		justify-content: space-around;
	}

	.icon_signsuc {
		width: 24rpx;
		height: 23rpx;
		position: relative;
		z-index: 2;
	}

	.sign_btn {
		width: 500rpx;
		height: 78rpx;
		background-color: #0285ff;
		color: #fff;
		line-height: 78rpx;
		text-align: center;
		border-radius: 4rpx;
		margin: 50rpx auto 0;
	}

	.img_lottery {
		width: 737rpx;
		height: 178rpx;
		display: block;
		margin: 110rpx auto 0;
	}

	.taskbox {
		margin: 70rpx 36rpx 0;
		padding-bottom: 40rpx;
		border-bottom: 1px solid #e5e5e5;
	}

	.taskbox .title {
		font-size: 34rpx;
		color: #232323;
		font-weight: bold;
		padding-bottom: 40rpx;
	}

	.col7e {
		color: #7e7e7e;
	}

	.icon_task {
		width: 77rpx;
		height: 77rpx;
		margin-right: 13rpx;
	}

	.task_item {
		margin-bottom: 37rpx;
	}

	.task_title {
		font-size: 28rpx;
		color: #232323;
		font-weight: bold;
		padding-bottom: 12rpx;
	}

	.task_title text {
		font-size: 20rpx;
		color: #ff4040;
		font-weight: normal;
	}

	.gotocom {
		width: 144rpx;
		color: #fff;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 4rpx;
		background-color: #0285ff;
	}

	.gotocom.on {
		background-color: #dcdcdc;
		font-size: 26rpx;
		color: #5c5c5c;
	}

	.rule_box {
		border-radius: 15rpx;
		background-color: rgb(255, 255, 255);
		box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(2, 133, 255, 0.09);
		width: 690rpx;
		margin: 25rpx 30rpx;
		padding: 40rpx;
		color: #232323;
	}

	.rule_box .title {
		font-size: 34rpx;
		padding-bottom: 30rpx;
	}

	.sign_in_detail {
		position: absolute;
		top: 25rpx;
		right: 0;
		height: 48rpx;
		line-height: 48rpx;
		color: #005cb1;
		font-size: 24rpx;
		width: 130rpx;
		border-radius: 50rpx 0 0 50rpx;
		background-color: #aed8ff;
		text-align: center;
	}
</style>
